<template>
    <div id="mapViewDiv"></div>
</template>

<script setup>
import Map from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
import esriConfig from "@arcgis/core/config";
import { onMounted } from "vue";

esriConfig.apiKey = "AAPKbc39388212994c7eb379017d536e6c90Dncg8MYrCwRMpxalvJ4L9LR5FK_5Olq0Bu0oalf6ahkE9G2LjMKye01nK7nRGOQG";

onMounted(() => {
    const map = new Map({
        basemap: "arcgis-topographic"
    });

    const view = new MapView({
        map: map,
        center: [118.805, 30.027],
        zoom: 13,
        container: "mapViewDiv",
    });
});

</script>

<style scoped>
#mapViewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
}
</style>